<template>
  <div class="mainBox">
    <h1 style="color:white">用户注册</h1>
    <input class="inputBox" type="text" placeholder="请输入邮箱" v-model="email">
    <input class="inputBox" type="text" placeholder="请输入账号" v-model="userName">
    <input class="inputBox" type="password" placeholder="请输入密码" v-model="userPassword">
    <div class="classCheckCode">
      <input class="checkInput" type="text" placeholder="验证码" v-model="checkCode">
      <a-button type="primary" :disabled="disable" size="middle" style="width: 125px ;color:#fff" @click="startTimer">
        {{ intervalId==null?'获取邮箱验证码': remainingTime+' 秒后重试' }}</a-button>
    </div>
    <a-button style="width: 200px;height: 50px" size="large" type="primary" @click="toRegister">登录</a-button>
  </div>
</template>

<script setup>
import {onBeforeUnmount, ref} from "vue";
import {message} from "ant-design-vue";
import myAxios from "../axios.js";
const remainingTime = ref(60);
const intervalId = ref(null);
const disable = ref(false);
const email = ref('');
const userName = ref('');
const userPassword = ref('' );
const checkCode = ref('');
const getIsEmail = (paramEmail) => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(paramEmail);
}
const startTimer = () => {
  if(!getIsEmail(email.value)){
    message.warn("请输入正确的邮箱格式");
    return ;
  }
  disable.value = true;
  intervalId.value = setInterval(() => {
    if(remainingTime.value > 0){
      remainingTime.value = remainingTime.value - 1;
    }else{
      clearInterval(intervalId.value);
      intervalId.value = null;
      disable.value = false;
    }
  },1000);
  myAxios.get('/user/getRegisterCode?mail='+email.value).then(
      res => {
        if(res.code === 0 && res.data){
          message.success("验证码发送成功");
        }
        else{
          message.error("请求错误");
        }
      }
  )
}
onBeforeUnmount(()=>{
  if(intervalId.value){
    clearInterval(intervalId.value);
  }
})
const toRegister = () => {
  if(email.value.length === 0){
    message.error("请输入邮箱")
    return
  }
  if(userName.value.length < 4 ){
    message.error("用户名长度不得小于4")
    return
  }
  if(userPassword.value.length < 8){
    message.error('密码长度不得小于8');
    return
  }
  if(checkCode.value.length <=0){
    message.error('请输入验证码');
    return
  }
  myAxios.post('/user/register',{
    userName:userName.value,
    userPassword: userPassword.value,
    registerCode : checkCode.value,
    email: email.value
  }).then(
      res => {
        if(res.code === 0 && res.data){
          message.success('注册成功，快去登录吧');
          userName.value = '';
          email.value = '';
          userPassword.value = '';
          checkCode.value = '';
        }
        else{
          message.error(res.message);
        }
      }
  ).catch(
      error =>{
        message.error("请求发生错误了");
        console.log("错误信息",error);
      }
  )
}
</script>

<style scoped>
.mainBox {
  height: 450px;
  width: 300px;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  margin:0 auto;
  margin-top:50px;
}
.mainBox .inputBox {
  height: 50px;
  width: 250px;
  background: rgba(255,255,255,0.4);
  outline: none;  font-size: 20px;
  border-radius: 25px;

  padding:20px;
  border:none;
}
/* 为了更好的浏览器兼容性，使用带有浏览器前缀的样式 */
.mainBox .inputBox::-webkit-input-placeholder{
  color: black;
}

.mainBox .inputBox:-moz-placeholder {
  color: black;
}

.mainBox .inputBox::-moz-placeholder{
  color: black;
}

.mainBox .inputBox:-ms-input-placeholder {
  color: black;
}
.mainBox .classCheckCode{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.mainBox .classCheckCode .checkInput{
  height: 48px;
  width: 125px;
  background: rgba(255,255,255,0.4);
  outline: none;
  font-size: 20px;
  border-radius: 25px;
  padding:20px;
  border:none;
}
.mainBox .classCheckCode .checkInput::-webkit-input-placeholder{
  color: black;
  font-size:15px;
}

.mainBox .classCheckCode .checkInput:-moz-placeholder {
  color: black;
}

.mainBox .classCheckCode .checkInput::-moz-placeholder{
  color: black;
}

.mainBox .classCheckCode .checkInput:-ms-input-placeholder {
  color: black;
}
</style>